require('./index.css');
let _util = require('util/util.js');
let htmlTemplate = require('./index.art');

let ImageModal = function () {
    let _this = this;

    //点击查看相关证件
    $(document).on('click', '.preview-img', function (e) {
        let _this = $(this),
            $img = $(e.currentTarget),
            clickedImageSrc = $img.attr('src');

        _this.siblings('.curr-img').find('img').attr('src', clickedImageSrc);
    });

    //关闭弹窗
    $(document).on('click', '.close-btn', function (e) {
        e.stopPropagation();
        $(this).parents('.image-modal-wrapper').hide();
    });

    //点击dot触发切换图
    $(document).on('click', '.dots-wrapper', function (e) {
        e.stopPropagation();

        let $target = $(e.target),
            data = _this.data,
            $imgs = $('.preview-img').find('img'),
            curr_display_img = document.getElementById('cur-dis-img'),
            index = $target.data('index'),
            curr_clicked_img = $imgs[index],    //当前点击的图片
            $divs = data.$imgs.parent();

        if ($target[0].nodeName === 'LI') {
            curr_display_img.src = curr_clicked_img.src;
            $('.dots-wrapper li').removeClass('active');
            $target.addClass('active');

            //小图联动
            $divs.removeClass('active');
            $($divs[index]).addClass('active');

            //更新索引
            data.clickedImage = index;
        }
    });

    //点击大图区域的左右切换
    $(document).on('click', '.curr-img', function (e) {
        e.stopPropagation();

        let data = _this.data,
            $target = $(e.target).parent(),
            diretion = $target.data('direction'),   //判断上一图还是下一图
            $imgs = data.$imgs,
            // index = data.index, //当前大图的索引
            index = data.clickedImage,
            $imgs_len = data.$imgs_len,
            $curr_display_img = data.$curr_display_img,   //大图的jquery对象
            $lis = data.$lis,
            $divs = data.$imgs.parent();

        if (diretion === 'left') {
            index === 0 ? '' : --index;
        } else {
            index === $imgs_len ? '' : ++index;
        }

        data.index = index; //更新当前索引
        //更新索引
        data.clickedImage = index;

        $curr_display_img.attr('src', $imgs[index].src);    //更新显示大图

        //小圆点联动
        $lis.removeClass('active');
        $($lis[index]).addClass('active');

        //小图联动
        $divs.removeClass('active');
        $($divs[index]).addClass('active');
    });

    //点击小图，更换大图和圆点
    $(document).on('click', '.preview-img-wrapper', function (e) {
        e.stopPropagation();

        let data = _this.data,
            $target = $(e.target),
            index = $target.data('index'),  //当前点击的索引
            $curr_display_img = data.$curr_display_img, //大图的jquery对象
            $lis = data.$lis,   //小圆点
            nodeName = $target[0].nodeName,
            $divs = data.$imgs.parent();

        if (nodeName === 'IMG' || nodeName === 'DIV') {

            $divs.removeClass('active');

            if (nodeName === 'DIV') {
                let $img = $target.find('img');
                $curr_display_img.attr('src', $img.attr('src'));
                index = $img.data('index');
                $target.addClass('active');
            } else {
                $curr_display_img.attr('src', $target.attr('src'));
                $target.parent().addClass('active');
            }

            //小圆点联动
            $lis.removeClass('active');
            $($lis[index]).addClass('active');

            //更新索引
            data.clickedImage = index;
        }

    });


}

/**
 * 渲染图片弹窗组件
 * @param {*} option 
 */
ImageModal.prototype.render = function (option) {
    let _this = this;

    if (!(option.container instanceof window.jQuery)) {
        return
    }

    option.data.hasPics = !!option.data.documents.length;   //判断是否有图片
    option.data.hasPics ? option.data.activeImg = option.data.documents[0] : '';
    let renderedHtml = _util.renderHtml(htmlTemplate, option.data || {});
    option.container.html(renderedHtml);
    //初始化对象数据
    _this.data = {
        clickedImage: 0,
        $curr_display_img: $('#cur-dis-img'),  //当前显示的大图
        index: parseInt($('#cur-dis-img').data('id'), 10), //当前大图的索引
        $imgs: $('.preview-img').find('img'),
        $imgs_len: $('.preview-img').find('img').length,   //图片总数
        to_display_img: null,  //将要显示图片的dom
        $lis: $('.dots-wrapper li'),
        $imgIndexs: $('.img-index')
    }

    //初始化小圆点自定义data
    $(this.data.$lis[0]).addClass('active');
    $.each(this.data.$lis, function (index, value) {
        $(value).data('index', index);
        $(_this.data.$imgIndexs[index]).text(index);
    });

}

module.exports = ImageModal;